@use "sass:color";
@use '../../vars.scss';

.nav_buttons {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  margin: 0 1em;
  z-index: 40;

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: vars.$blue;
    height: 30px;
    width: 30px;
    cursor: pointer;

    &.disable {
      opacity: 0.4;
      cursor: not-allowed;
    } 

    &:not(.disable):hover {
      background: color.adjust(vars.$blue, $lightness: -10%);
    }

    &:not(.disable):active {
      background: color.adjust(vars.$blue, $lightness: -15%);
    }

    &:first-child {
      margin-right: 12px;
    }
  }
}
